<template>
	<view 
		class="block-bg"
		:style="{
			'background': `url(${getImg('login-bg')}) no-repeat`,
		}"
	>
		<headNav
			title="预约时间" 
			bgColor="transparent" 
			titColor="transparent" 
			iconC="transparent"
		></headNav>
		<view class="welcome-box mar-t80 mar-l26 pad-t28">
			欢迎使用！
		</view>
		<view class="login-logo flex-center mar-t60">
			<u-avatar src="" size="120rpx"></u-avatar>
		</view>
		<view class="form-box mar-t64 padlr72">
			<u-input
				placeholder="请输入您的手机号"
				v-model="formLogin.mobile"
				border="none"
				:customStyle="{background: '#FFFFFF', 'padding': '24rpx 32rpx'}"
				class="h-88"
			>
				<template slot="prefix">
					<view class="mar-r24">
						<u--image 
							:showLoading="true" 
							:src="getImg('phone-icon')" 
							width="30rpx" 
							height="32rpx" 
						></u--image>
					</view>
				</template>
			</u-input>
			<view class="mar-t32">
				<u-input
					placeholder="请输入验证码"
					v-model="formLogin.code"
					border="none"
					:customStyle="{background: '#FFFFFF', 'padding': '24rpx 32rpx'}"
					class="h-88 "
					maxlength="6"
				>
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							seconds="60"
							changeText="X秒重新获取"
						></u-code>
						<view class="send-txt" @tap="getCode">
							{{ tips }}
						</view>
					</template>
				</u-input>
			</view>
			<view class="submit-btn mar-t80" @click="onLogin">
				登录
			</view>
			
			<view class="other-login flex-col flex-center mar-t224">
				<view class="other-tit ">
					—其他登录方式—
				</view>
				<view class="other-li mar-t40 ">
					<u--image
						:showLoading="true" 
						:src="getImg('wechat-icon')" 
						width="72rpx" 
						height="72rpx" 
					></u--image>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { login } from "@/apis/login"
	export default {
		data() {
			return {
				formLogin: {
					mobile: "18247888888",
					code: ""
				},
				tips: ""
			}
		},
		onLoad() {
			
		},
		methods: {
			onLogin() {
				login({
					phone: this.formLogin.mobile,
					code: this.formLogin.code
				}).then(res=>{
					uni.setStorageSync("token", res.data)
					uni.switchTab({
						url: "/pages/index/index"
					})
					console.log(res, "--res");
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
				  // 模拟向后端请求验证码
				  uni.showLoading({
					title: '正在获取验证码'
				  })
				  setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				  }, 1000);
				} else {
				  uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.other-login {
		.other-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: center;
		}
	}
	.submit-btn {
		width: 606rpx;
		height: 88rpx;
		background: #FF7171;
		border-radius: 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
	.welcome-box {
		background: url("@/static/imgs/login-icon.png") no-repeat;
		background-size: 100% ;
		height: 72px;
		width: 285rpx;
	}
	.form-box {
		.send-txt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FF7171;
			line-height: 33rpx;
			text-align: center;
		}
	}
	.welcome-box {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 48rpx;
		color: #FF7171;
		line-height: 56rpx;
		font-style: normal;
	}
	.block-bg {
		// padding-top: var(--status-bar-height);
		background-size: 100% 100% !important;
		height: 100vh;
	}
</style>
